<template>
  <div class="w-[100%] h-[100%]">
    <VueUiSparkline :dataset="dataset" :config="config" @selectDatapoint="selectDatapoint" />
  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { VueUiSparkline } from 'vue-data-ui'

const dataset = [
  {
    period: 'period 1',
    value: 0,
  },
  {
    period: 'period 2',
    value: -1,
  },
  {
    period: 'period 3',
    value: 2,
  },
  {
    period: 'period 4',
    value: -3,
  },
  {
    period: 'period 5',
    value: 4,
  },
  {
    period: 'period 6',
    value: -5,
  },
  {
    period: 'period 7',
    value: 6,
  },
  {
    period: 'period 8',
    value: -7,
  },
  {
    period: 'period 9',
    value: 8,
  },
  {
    period: 'period 10',
    value: -9,
  },
  {
    period: 'period 11',
    value: 10,
  },
  {
    period: 'period 12',
    value: -11,
  },
  {
    period: 'period 13',
    value: 12,
  },
  {
    period: 'period 14',
    value: -13,
  },
  {
    period: 'period 15',
    value: 14,
  },
  {
    period: 'period 16',
    value: -15,
  },
  {
    period: 'period 17',
    value: 16,
  },
]
const config = {
  type: 'line',
  downsample: { threshold: 500 },
  style: {
    backgroundColor: '#FFFFFF05',
    fontFamily: 'inherit',
    chartWidth: 290,
    scaleMin: null,
    scaleMax: null,
    padding: { top: 12, right: 0, bottom: 3, left: 0 },
    animation: { show: true, animationFrames: 360 },
    line: { color: '#5f8bee', strokeWidth: 3, smooth: true },
    bar: { borderRadius: 3, color: '#5f8bee' },
    zeroLine: { color: '#505050', strokeWidth: 1 },
    plot: { show: true, radius: 4, stroke: '#FFFFFF', strokeWidth: 1 },
    verticalIndicator: {
      show: true,
      strokeWidth: 1.5,
      color: '#5f8bee',
      strokeDasharray: 3,
    },
    dataLabel: {
      show: true,
      offsetX: 0,
      offsetY: 0,
      position: 'left',
      fontSize: 48,
      bold: true,
      color: '#CCCCCC',
      roundingValue: 1,
      valueType: 'latest',
      prefix: '',
      suffix: '',
    },
    title: {
      show: true,
      textAlign: 'left',
      color: '#FAFAFA',
      fontSize: 16,
      bold: true,
      text: 'Title',
    },
    tooltip: {
      show: false,
      fontSize: 14,
      color: '#CCCCCC',
      backgroundColor: '#1A1A1A',
      offsetY: 0,
      borderWidth: 0,
      borderColor: '#3A3A3A',
      borderRadius: 2,
      backgroundOpacity: 100,
    },
    area: { show: true, useGradient: true, opacity: 30, color: '#5f8bee' },
  },
}
onMounted(() => {})

function selectDatapoint({ datapoint, index }) {
  console.log({ datapoint, index })
}
</script>
<style scoped></style>
